<template>
	<div class="">
		<div>
			<el-button type="primary" @click="exportExcel">导出</el-button>
		</div>
		<div style="margin-top: 20px">
			<el-checkbox v-model="checked_all" label="全选" @change="onChangeCheckAll" />
			<el-checkbox v-for="(item, index) in checkList" :key="index" v-model="item.name" :label="item.label" @change="onChangeCheck($event, item)" />
		</div>
	</div>
</template>

<script lang="ts">
import { ref, reactive, toRefs } from 'vue';

// 安装插件：npm install js-table2excel
import table2excel from 'js-table2excel';
import { ElMessage } from 'element-plus';

export default {
	setup() {
		const state = reactive({
			checked_all: false,
			key: '',
			column: [] as any,
			checkList: [
				{
					name: false,
					label: 'id',
				},
				{
					name: false,
					label: '姓名',
				},
				{
					name: false,
					label: '班级',
				},
				{
					name: false,
					label: '学号',
				},
			],
		});
		const arr = [
			{
				s_id: 1,
				s_class: '一班',
				s_xh: '2023014',
				s_name: '南宁',
			},
		];
		// 定义一个新的顺序数组
		const newOrder = ['s_id', 's_name', 's_class', 's_xh'];
		const columns = [
			// {
			// 	title: '二维码',
			// 	key: 's_names',
			// 	type: 'image',
			// 	width: 100,
			// 	height: 100,
			// },
			{
				title: 'id',
				key: 's_id',
				type: 'text',
			},
			{
				title: '姓名',
				key: 's_name',
				type: 'text',
			},
			{
				title: '班级',
				key: 's_class',
				type: 'text',
			},
			{
				title: '学号',
				key: 's_xh',
				type: 'text',
			},
		];
		const exportExcel = () => {
			if (state.checkList.every((item) => item.name == false)) {
				ElMessage.error('至少选中一个选项');
			} else {
				// state.column是显现的列名
				table2excel(state.column, arr, arr[0].s_class + 'excel');
			}
		};

		// 字段选中
		const onChangeCheck = (e: any, item: any) => {
			console.log(item);
			const index = state.checkList.indexOf(item);
			if (item.name) {
				if (item.label == 'id') {
					state.key = 's_id';
				} else if (item.label == '姓名') {
					state.key = 's_name';
				} else if (item.label == '班级') {
					state.key = 's_class';
				} else if (item.label == '学号') {
					state.key = 's_xh';
				}
				state.column.push({
					title: item.label,
					key: state.key,
					type: 'text',
				});
				// 使用 sort 方法对 state.column 数组中的元素进行排序
				state.column.sort((a: any, b: any) => {
					return newOrder.indexOf(a.key) - newOrder.indexOf(b.key);
				});
				console.log(state.column);
				state.checked_all = state.checkList.every((item: any) => item.name == true);
			} else {
				console.log(item);
				if (item.label == 'id') {
					const filteredColumns = state.column.filter((column: any) => column.key !== 's_id');
					state.column = filteredColumns;
					state.checked_all = !state.column.every((item: any) => item.name != true);
					// 使用 sort 方法对 state.column 数组中的元素进行排序
					state.column.sort((a: any, b: any) => {
						return newOrder.indexOf(a.key) - newOrder.indexOf(b.key);
					});
					console.log(state.column);
				} else if (item.label == '姓名') {
					const filteredColumns = state.column.filter((column: any) => column.key !== 's_name');
					state.column = filteredColumns;
					state.checked_all = !state.column.every((item: any) => item.name != true);
					// 使用 sort 方法对 state.column 数组中的元素进行排序
					state.column.sort((a: any, b: any) => {
						return newOrder.indexOf(a.key) - newOrder.indexOf(b.key);
					});
					console.log(state.column);
				} else if (item.label == '班级') {
					const filteredColumns = state.column.filter((column: any) => column.key !== 's_class');
					state.column = filteredColumns;
					state.checked_all = !state.column.every((item: any) => item.name != true);
					// 使用 sort 方法对 state.column 数组中的元素进行排序
					state.column.sort((a: any, b: any) => {
						return newOrder.indexOf(a.key) - newOrder.indexOf(b.key);
					});
					console.log(state.column);
				} else if (item.label == '学号') {
					const filteredColumns = state.column.filter((column: any) => column.key !== 's_xh');
					state.column = filteredColumns;
					state.checked_all = !state.column.every((item: any) => item.name != true);
					// 使用 sort 方法对 state.column 数组中的元素进行排序
					state.column.sort((a: any, b: any) => {
						return newOrder.indexOf(a.key) - newOrder.indexOf(b.key);
					});
					console.log(state.column);
				}
			}
		};

		// 字段全选
		const onChangeCheckAll = (e: any) => {
			if (e) {
				state.checkList.forEach((item) => {
					item.name = true;
				});
				state.column = [
					{
						title: 'id',
						key: 's_id',
						type: 'text',
					},
					{
						title: '姓名',
						key: 's_name',
						type: 'text',
					},
					{
						title: '班级',
						key: 's_class',
						type: 'text',
					},
					{
						title: '学号',
						key: 's_xh',
						type: 'text',
					},
				];
				console.log(state.column);
			} else {
				state.checkList.forEach((item) => {
					item.name = false;
				});
				state.column = [];
				console.log(state.column);
			}
		};

		return {
			columns,
			exportExcel,
			arr,
			...toRefs(state),
			onChangeCheck,
			onChangeCheckAll,
		};
	},
};
</script>
